<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">待派单</h2>
  </header>
  <div class="page">
    <div class="list-warp" v-for="(item , index) in todolist"> 
      <div class="list-boss-address" @change="changeSele(item.TrtplpomainGroupByList,index)">
        <label class="checkbox-wrap displayflex">
          <input type="checkbox" class="list-radio-check" v-model="allValue" :value="index">
          <!-- <i class="iconfont icon-uncheck"></i>
          <i class="iconfont icon-checkbox"></i> -->
          <span class="list-radio-circle"></span>
          <p class="flex1">{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</p>
        </label>
      </div>
      <div class="list-ctx displayflex lineb" v-for="detail in item.TrtplpomainGroupByList">
        <label class="checkbox-wrap displayflex">
          <input type="checkbox" class="list-radio-check" v-model="dataModel[index].value1" :value="detail">
          <span class="list-radio-circle"></span>
          <!-- <i class="iconfont icon-uncheck"></i>
          <i class="iconfont icon-checkbox"></i> -->
          <div class="grab-wrap flex1">
            <div class="addr ft17"><span class="dotted"></span>{{detail.DepartureProvince | province}}{{detail.DepartureCity | city}}{{detail.DepartureDistrict | district}}{{detail.DepartureAddress}}</div>
            <div class="addr ft17"><span class="dotted org"></span>{{detail.ArrivalProvince | province}}{{detail.ArrivalCity | city}}{{detail.ArrivalDistrict | district}}{{detail.ArrivalAddress}}</div>
            <div class="statis ft14 displayflex">
              <span>{{detail.OrdersVolumn}}m³ ，{{detail.OrdersWeight}}kg，共 {{detail.OrdersPKGS}} 件  </span>
              <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">{{detail.CarrierAmount | DriverFee}}</span></div>
            </div>
            <div class="ft14">最晚提货时间：<span class="org">{{detail.CollectionTime | timeshort}}</span></div>
            <div class="ft14">要求到达时间：<span class="org">{{detail.LastArrivalArrivedDate | timeshort}}</span></div>
            <!-- <div class="red ft14">已超时，无配送员接单</div> -->
          </div>
        </label>
      </div>
    </div>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      未找到相关数据
    </div>
  </div>
  <div class="displayflex dispatch-footer">
    <label class="checkbox-wrap cf">
      <input type="checkbox" class="list-radio-check f-l" v-model="resultSele" @change="resultSeleF">
      <!-- <i class="iconfont icon-uncheck"></i>
      <i class="iconfont icon-checkbox"></i> -->
      <span class="list-radio-circle f-l"></span>
      <em class="txt f-l">全选</em>
    </label>
    <div class="flex1">已选择 {{totalNum}} 单</div>
    <div class="rit-btn" @click="dispatchurl()">立即派单</div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],//列表接口总数据
      showLoad: false,
      dataModel:[],//选中的订单的item数据
      allValue:[],//选中的父级的数据
      resultSele:false,//全选是否选中
      totalNum:0//选中的订单总数
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  watch:{
    dataModel:{
      handler (val) {
        this.allValue = [];
        //控制父级
        for(var i=0;i<val.length;i++){
          if(!this.todolist[i]){
            return false;
          }
          if(val[i].value1.length == this.todolist[i].TrtplpomainGroupByList.length){
            this.allValue.push(i)
          }
        }
        this.count();
        //控制全选按钮
        if(this.allValue.length == this.todolist.length){
          this.resultSele = true;
        }else{
          this.resultSele = false;
        }
      },
      deep:true
    },
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      var query = {
          BBillType:'B01',
          State: 12,
          PageIndex:1,
          PageSize:100
        },
        _this = this;
      _this.showLoad = true;
      _this.Ajax.post("SearchOrderGroupByList", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          _this.todolist = resp.Datas;
          var len = _this.todolist.length;
          for (var i = 0; i < len; i ++) {
            var item1 = {value1: []};
            _this.dataModel.push(item1);
          }
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    dispatchurl() {
      var self =this;
    
      if (self.totalNum== 0) {
          self.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请选择订单"
        });
        return false;
      }
      var selectData = [];
    
      self.dataModel.forEach(element => {
        if (element.value1.length>0) {
          element.value1.forEach(item => {
               selectData.push(item);
          });
        }
      });
      sessionStorage.selectDataOrder =  JSON.stringify(selectData);
      this.$router.push({
        path: "/driverList",
      });
    },
    //计算选中的总数
    count(){
      this.totalNum = 0;
      for(var i=0;i<this.dataModel.length;i++){
        this.totalNum += this.dataModel[i].value1.length;
      }
    },
    //父级点击
    changeSele(value,index){
      var check = false;
      for(var i=0;i<this.allValue.length;i++){
        if(this.allValue[i] == index){
          check = true;
        }
      };
      if(check){
        this.dataModel[index].value1 = [];
        for(var i =0;i<value.length;i++){
          this.dataModel[index].value1.push(value[i]);
        };
      }else{
        this.dataModel[index].value1 = [];
      }
    },
    //点击全选按钮
    resultSeleF(){
      var len = this.todolist.length;
      this.dataModel = [];
      for (var i = 0; i < len; i ++) {
        var item1 = {value1: []};
        this.dataModel.push(item1);
      };
      if(this.resultSele){
        for (var i = 0; i < len; i ++) {
          for(var j=0;j<this.todolist[i].TrtplpomainGroupByList.length;j++){
            var ctx = this.todolist[i].TrtplpomainGroupByList[j];
            this.dataModel[i].value1.push(ctx);
          };
        }
      }
    }
  }
};
</script>